<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>28_document选择器</title>
  </head>
  <body>
    <button id="btn1">测试</button>
    <button class="btn2">测试</button>
    <button a="1">测试</button>
    <button b="2">测试</button>
    <button b="3">测试</button>
    <button>测试</button>
    <button>测试</button>
    <button>测试</button>
    <button>测试</button>

    <script>
      //1.标签选择器-单个选择器
      //   document.querySelector("button").onclick = () => {
      //     alert("单个选择器-测试");
      //   };

      //2.标签选择器-多个选择器
      //   document.querySelectorAll("button").forEach((item) => {
      //     // item.onclick = () => {
      //     //   alert("多个选择器-测试1");
      //     // };
      //     item.addEventListener("click", () => {
      //       alert("多个选择器-测试2");
      //     });
      //   });
      //3.id选择器 - 唯一
      //   document.querySelector("#btn1").onclick = () => {
      //     alert("id选择器-测试");
      //   };
      //4.类选择器
      //   document.querySelector(".btn2").onclick = () => {
      //     alert("类选择器-测试");
      //   };
      //5.多条件选择器
      document.querySelector("button[b='3']").onclick = () => {
        alert("多条件选择器-测试");
      };
      // 标签选择器
      // 类选择器
      // id选择器 唯一的
      // 多条件选择器
    </script>
  </body>
</html>
